<script setup>
	import $http from '@/utils/http'
	import { ref, onMounted, customRef } from 'vue'
	import { onPullDownRefresh, onLoad  } from '@dcloudio/uni-app'
	import YingbingVideo from '@/uni_modules/yingbing-video/components/yingbing-video/yingbing-video.vue'
	import { secondsToTime, getClientHeight } from '@/utils/pkg'
	
	import playIcon from '@/static/icon/show-video/play.png'
	import comeIcon from '@/static/icon/show-video/come.png'
	import sound from '@/static/icon/show-video/sound.png'
	import soundStop from '@/static/icon/show-video/sound_stop.png'
	import anewIcon from '@/static/icon/show-video/anew.png'
	
	const yingbingVideoDom = ref()
	const isVideoPlay = ref(true)
	const muted = ref(true)
	const volume = ref(1.0)
	const platform = ref(0)
	const fileName = ref('')
	const progress = ref(0)
	const totalVideoTiem = ref(0)
	const name = ref('')
	const src = ref('')
	const videoColorPage = ref('')
	const videoTiem = ref(['0:0:0', '0:0:0', '0:0:0'])
	
	import egVideo from '@/static/icon/home/eg.mp4'
	const init = async (name) => {
		// const res = await $http.request({
		// 	url: `/video?file=${name}`,
		// 	method: 'GET',
		// })
		// if(res.code !== 200) {
		// 	uni.showToast({
		// 		title: res.msg,
		// 		duration: 2000,
		// 		icon: 'error',
		// 	});
		// 	return
		// }
		// src.value = res.data.url
		// totalVideoTiem.value = res.data.duration
		// const { h, m, s } = res.data.time
		// videoTiem.value[1] = `${h}:${m}:${s}`
		// videoColorPage.value = res.data.color
		src.value = egVideo
	}
	
	// 播放/暂停
	const videoPlay = async () => {
		isVideoPlay.value = !isVideoPlay.value
		try {
			await yingbingVideoDom.value.toggle()
		} catch (e) {
			flushed()
		}
	}
	
	// 播放触发
	const isPlay = () => {
		isVideoPlay.value = true
	}
	
	// 播放结束触发
	const isPlayEnded = async () => {
		try {
			await	yingbingVideoDom.value.play()
		} catch (e) {
			flushed()
		}
	}
	
	// 开始加载触发
	const loadstartLoading = () => {
		isVideoPlay.value = false
	}
	
	// 开打声音
	const mutedOpen = () => {
		muted.value = !muted.value
		// yingbingVideoDom.value = muted.value
	}
	
	// 播放时间
	const timeupdatePlay = (e) => {
		progress.value = e.currentTime / totalVideoTiem.value * 100
		const { h, m, s } = secondsToTime(e.currentTime)
		videoTiem.value[0] = `${h}:${m}:${s}`
	}
	
	// 缓存视频触发
	const canplaythroughVideo = (e) => {
		// console.log(e)
		// console.log(yingbingVideoDom.value)
	}
	
	// 控制进度条
	const onProgressChange = (event) => {
		progress.value = event.detail.value;
		yingbingVideoDom.value.seek(totalVideoTiem.value * (progress.value / 100))
	}
	
	// 刷新页面
	const flushed = () => {
		yingbingVideoDom.value.stop()
		yingbingVideoDom.value.reload()
		setTimeout(() => {
			init(fileName.value.file)
		}, 500)
	}
	
	// 返回上一个页面
	const navigateBackPage = () => {
		yingbingVideoDom.value.stop()
		uni.navigateBack({
			delta: 1
		})
	}
	
	// 下拉触发
	onPullDownRefresh(() => {
		flushed()
		uni.stopPullDownRefresh()
	})
	
	// 获取路由参数
	onLoad((e) => {
		fileName.value = e
		name.value = e.name
		init(e.file)
	})
	
	onMounted(() => {
		platform.value = getClientHeight()
	})
</script>

<template>
	<view class="page-show-cideo" :style="`padding-top: ${platform}rpx; background-color: #${videoColorPage};`">
		<yingbing-video
			id="myVideo"
			class="show-video"
			:style="`height: calc(100vh - ${platform}rpx);`"
			autoplay
			@play="isPlay"
			@ended="isPlayEnded"
			@loadstart="loadstartLoading"
			@timeupdate="timeupdatePlay"
			@progress="canplaythroughVideo"
			:src="src"
			:muted="!muted"
			:volume="volume"
			:controls="false"
			:timeShow="false"
			:playShow="false"
			:volumeShow="false"
			:settingShow="false"
			:progressShow="false"
			ref="yingbingVideoDom"
			:fullscreenShow="false"/>
			
		<view
			:class="`controls-box ${ isVideoPlay ? 'justify-flex-end' : ''}`"
			:style="`height: calc(100vh - ${platform}rpx); padding-top: ${platform}rpx;`"
			@click="videoPlay">
			<view class="controls-icon-top" v-if="!isVideoPlay">
				<image class="come-icon" :src="comeIcon" @click.stop="navigateBackPage"></image>
				<view class="show-name">
					<text class="scroll-text">{{ name }}</text>
				</view>
			</view>
			
			<view class="controls-play" v-if="!isVideoPlay">
				<image class="play-icon" :src="playIcon"></image>
			</view>
			
			<view class="controls-icon-buttom" v-if="!isVideoPlay">
				<view class="box-list" @click.stop="flushed">
					<image class="sound-stop-icon" :src="anewIcon"></image>
				</view>
				
				<view class="box-list" @click.stop="mutedOpen">
					<image class="sound-stop-icon" v-if="muted" :src="sound"></image>
					<image class="sound-stop-icon" v-else :src="soundStop"></image>
				</view>
				
				<view class="box-list-time">
					{{ videoTiem[0] }}
				</view>
				
				<view class="box-list-time progress">
					<slider 
						class="progress-slider"
						min="0" 
						max="100" 
						:value="progress" 
						backgroundColor="#ffffff20"
						activeColor="#7a9aff"
						block-color="#7a9aff"
						block-size="1" 
						@change.stop="onProgressChange" 
					/>
				</view>
				
				<view class="box-list-time">
					{{ videoTiem[1] }}
				</view>
			</view>
		</view>
	</view>
</template>

<style scoped lang="scss">
@import "@/common/common.scss";
	
.page-show-cideo {
	width: 100vw;
	position: relative;
	background-color: #000;
	
	.show-video {
		width: 100vw;
	}
	
	.justify-flex-end {
		justify-content: space-between;
	}
	
	.controls-box {
		width: 100vw;
		z-index: 1000;
		color: #ffffff;
		
		top: 0;
		left: 0;
		position: absolute;
		
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
		
		.controls-icon-top {
			width: 100%;
			height: 80rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.5));
			
			display: flex;
			justify-content: flex-start;
			
			.come-icon {
				width: 40rpx;
				height: 40rpx;
			}
			
			.show-name {
				flex: 1;
				height: 45rpx;
				overflow: hidden;
				margin-left: 15rpx;

				.scroll-text {
					width: 100%;
					display: block;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
		.controls-icon-buttom {
			width: 100%;
			height: 80rpx;
			padding: 20rpx;
			box-sizing: border-box;
			background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
			
			display: flex;
			flex-direction: row;
			align-items: center;
			// justify-content: center;
			
			.box-list {
				width: 50rpx;
				height: 50rpx;
				margin-right: 20rpx;
				
				.sound-stop-icon {
					width: 50rpx;
					height: 50rpx;
				}
			}
			
			.box-list-time {
				width: min-content;
				height: 50rpx;
			}
			
			.progress {
				width: 100%;
				height: 45rpx;
				
				.progress-slider {
					margin: 0 10rpx;
					height: 40rpx;
				}
			}
		}
		
		.controls-play {
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
			
			display: flex;
			align-items: center;
			justify-content: center;
			
			.play-icon {
				opacity: 0.3;
				width: 100%;
				height: 100%;
				
				animation: magnifyHide 0.2s;
			}
		}
	}
}

@keyframes magnifyHide {
	0%   {
		transform: scale(1.5, 1.5);
	}
	100% {
		transform: scale(1, 1);
	}
}

@keyframes magnifyHideTop {
	100% {
		transform: translateY(0px)
	}
}
</style>